<template>
  <div class="cropper-container">
    <a-card class="card">
      <div class="content">
        <ImgCutter ref="cutter" @onPrintImg="onPrintImg" :isModal="false" toolBgc="#1890f" :boxHeight="500"
          :WatermarkText="watermark.text" :WatermarkTextFont="watermark.textFont"
          :WatermarkTextColor="watermark.fontColor" :WatermarkTextX="Number(watermark.x)"
          :WatermarkTextY="Number(watermark.y)" @cutDown="cutDown">
        </ImgCutter>
        <div class="preview">
          <div class="preview-img">
            <a-image :src="previews.url" :preview="false" />
          </div>
          <div class="preview-action">
            <a-button block @click="onConfirm">确定</a-button>
            <a-button block @click="onReset">重置</a-button>
            <a-button type="primary" @click="downImage" block>下载</a-button>
          </div>
        </div>
      </div>
      <div class="setting">
        <a-form :model="watermark" layout="inline" name="basic" autocomplete="off">
          <a-form-item label="水印文字" name="username">
            <a-input v-model:value="watermark.text" />
          </a-form-item>
          <a-form-item label="水印文字样式" name="username">
            <a-input v-model:value="watermark.textFont" />
          </a-form-item>
          <a-form-item label="水印文字颜色" name="username">
            <a-input v-model:value="watermark.fontColor" />
          </a-form-item>
          <a-form-item label="水印x轴位置（0-1）" name="username">
            <a-input v-model:value="watermark.x" />
          </a-form-item>
          <a-form-item label="水印y轴位置（0-1）" name="username">
            <a-input v-model:value="watermark.y" />
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue';
import ImgCutter from 'vue-img-cutter';
import * as util from '@/util/util.js';
const cutter = ref();
type WaterMark = {
  text: string;
  textFont: string;
  fontColor: string;
  x: number;
  y: number;
}
// 预览对象
const previews = reactive({
  url: '',
  fileName: ''
})
// 水印表单
const watermark = reactive<WaterMark>({
  text: '真是一个小机灵鬼',
  textFont: '12px Sans-serif',
  fontColor: '#000',
  x: 0.95, // 0-1
  y: 0.95 // 0-1
})
// 实时获取截图图片
const onPrintImg = (data: any) => {
  previews.fileName = data.fileName;
  previews.url = data.dataURL;
}
// 重置选择
const onReset = () => {
  cutter.value.clearAll();
  previews.url = '';
}
// 确定操作，裁剪+水印
const onConfirm = () => {
  cutter.value.cropPicture();
}
// 绑定在插件的确定函数
const cutDown = (data: any) => {
  previews.fileName = data.fileName;
  previews.url = data.dataURL;
}

const downImage = () => {
  util.createImage(previews.url, previews.fileName);
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
.cropper-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    min-width: 1000px;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;

    .content {
      display: flex;

      :deep(.i-dialog-footer) {
        display: none;
      }

      .preview {
        background-color: #dedede;
        width: 500px;
        margin: 0 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;

        .preview-img {
          width: 100%;
          height: 300px;
          background-color: #000;


        }

        .preview-action {
          flex: 1;
          padding-top: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }

    .setting {
      margin-top: 20px;

      :deep(.ant-form-item) {
        margin-bottom: 20px;
      }
    }
  }
}
</style>